<template>
  <div>
    <el-dialog
      :title="title"
      :visible="show"
      width="31%"
      center
      @close="off"
    >
      <el-form
        ref="form"
        :model="dept"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item
          label="模板类型"
          prop="templateType"
        >
          <el-select
            v-model="dept.templateType"
            filterable
            placeholder="请选择模板类型"
            style="width:95%"
            @change="changes($event)"
          >
            <el-option
              v-for="item in templateType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="运送类型"
          prop="transportType"
        >
          <el-select
            v-model="dept.transportType"
            filterable
            placeholder="请选择运送类型"
            style="width:95%"
          >
            <el-option
              v-for="item in transportType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市">

          <span v-if="shows">全国</span>
          <el-checkbox-group
            v-else
            v-model="dept.associatedCityList"
            @change="cc($event)"
          >
            <el-checkbox
              v-for="item in associatedCityList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            >{{ item.label }}</el-checkbox>
          </el-checkbox-group>

        </el-form-item>
        <el-form-item
          label="首重价格"
          prop="firstWeight"
        >
          <el-input
            v-model="dept.firstWeight"
            style="width:95%"
            placeholder="请输入首重价格"
          ><span
            slot="suffix"
            style="color:black;margin-right: 10px;"
          >元</span></el-input>
        </el-form-item>
        <el-form-item
          label="续重价格"
          prop="continuousWeight"
        >
          <el-input
            v-model="dept.continuousWeight"
            style="width:95%"
            placeholder="请输入续重价格"
          ><span
            slot="suffix"
            style="color:black;margin-right: 10px;"
          >元</span></el-input>
        </el-form-item>
        <el-form-item
          label="轻抛系数"
          prop="lightThrowingCoefficient"
        >
          <el-input
            v-model="dept.lightThrowingCoefficient"
            style="width:95%"
            placeholder="请输入轻抛系数"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="warning"
          style="width:90px;height:40px"
          @click="btnOk"
        >确 定</el-button>
        <el-button
          plain
          class="reset-btn"
          style="width:90px;height:40px"
          @click="btnClose"
        >取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { freightManageOperate } from '@/api/transit'
export default {
  props: {
    id: {
      type: String,
      default: null
    },
    show: {
      type: Boolean,
      default: false
    },
    shows: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '新增模板'
    },
    dept: {
      type: Object,
      default: null
    },
    templateType: {
      type: Array,
      default: null
    },
    transportType: {
      type: Array,
      default: null
    },
    associatedCityList: {
      type: Array,
      default: null
    },
    rules: {
      type: Object,
      default: null
    }
  },
  methods: {
    cc(value) {
      console.log(value)
    },
    changes(value) {
      if (value === 3) {
        this.$emit('update:shows', false)
        this.$emit('update:dept', { associatedCityList: [], firstWeight: this.dept.firstWeight,
          continuousWeight: this.dept.continuousWeight, lightThrowingCoefficient: this.dept.lightThrowingCoefficient,
          templateType: this.dept.templateType, transportType: this.dept.transportType })
      } else {
        this.$emit('update:shows', true)
        this.$emit('update:dept', { associatedCityList: [1], firstWeight: this.dept.firstWeight,
          continuousWeight: this.dept.continuousWeight, lightThrowingCoefficient: this.dept.lightThrowingCoefficient,
          templateType: this.dept.templateType, transportType: this.dept.transportType })
      }
    },
    off() {
      this.$emit('update:shows', true)
      this.$emit('update:show', false)
      this.$emit('update:dept', { associatedCityList: [],
        firstWeight: null,
        continuousWeight: null,
        lightThrowingCoefficient: null })
      this.$refs.form.clearValidate()
    },
    btnClose() {
      this.off()
    },
    async btnOk() {
      console.log(this.dept)
      await this.$refs.form.validate()
      if (this.title === '新增模板') {
        const { msg, code } = await freightManageOperate(this.dept)
        console.log(code)
        if (code === 1) {
          this.$message.error(msg)
        } else {
          this.$message.success('新增模板成功')
        }
      }
      if (this.id) {
        this.dept.id = this.id
        const { msg, code } = await freightManageOperate(this.dept)

        console.log(this.dept)
        console.log('1')
        console.log(code)
        if (code === 1) {
          this.$message.error(msg)
        } else {
          this.$message.success('编辑模板成功')
        }
      }

      this.$emit('freightManageList')

      this.off()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog--center .el-dialog__body {
  padding-top: 40px;
  padding-bottom: 5px;
}
::v-deep .el-dialog__title {
  display: flex;
  align-items: start;
}
::v-deep .el-dialog__footer {
  padding-bottom: 38px;
}
</style>
